<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>登录</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	  <!-- 引入elementui样式 -->
	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	  <!-- 引入vue -->
	  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	  <!-- 引入组件库 -->
	  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

	  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	  <!-- <script src="https://unpkg.com/vue-cookies@1.7.4/vue-cookies.js"></script> -->

	  <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
	
</head>

<body>
	<div class="background-item"></div>
	<div class="main-bg" id="mian">
		<div class="header-item">
			<h2 style="color: white;">您好{{userInfo.userName}}&nbsp;欢迎使用转账系统</h2>
			<el-button class="back-btn" @click="logout">退出登录</el-button>
		</div>
		<div class="content-item">
			<el-dialog title="转入账户等信息请仔细核对！" class="tranfer-item" :visible.sync="transferVisible" :show-close="false"
			:before-close="handleClose" append-to-body>
					<el-form ref="transferForm" :model="transfer" :rules="transferRules">
						<el-form-item label="转出账户" prop="accountSrc">
							<h2>{{transfer.accountSrc}}</h2>
						</el-form-item>
						<el-form-item label="账户姓名" prop="nameSrc">
							<h2>{{transfer.nameSrc}}</h2>
						</el-form-item>
						<el-form-item label="转入账户" prop="accountDest">
							<el-input v-model="transfer.accountDest" placeholder="请输入转出账户"></el-input>
						</el-form-item>
						<el-form-item label="转入账户姓名" prop="nameDest">
							<el-input v-model="transfer.nameDest" placeholder="请输入转入账户姓名"></el-input>
						</el-form-item>
						<el-form-item label="转账金额" prop="balance">
							<el-input type="number" step="1" v-model="transfer.balance" placeholder="请输入转账金额"
							oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
						</el-form-item>
						<el-form-item label="业务摘要" prop="note">
							<el-input v-model="transfer.note"></el-input>
						</el-form-item>
					</el-form>
				  <template #footer>
					<span class="dialog-footer">
					  <el-button @click="transferVisible = false">取 消</el-button>
					  <el-button type="primary" @click="submitTransfer('transferForm')">转 账</el-button>
					</span>
				  </template>
			</el-dialog>
			<el-dialog title="流水记录查询" class="flow-item" :visible.sync="flowVisible" :show-close="false" append-to-body>
					<div style="display: flex; flex-direction: row;">
						<el-input v-model="tagId" placeholder="请输入查询账户"></el-input>
						<el-button type="primary" @click="selectFlow">查&nbsp;询</el-button>
						<el-button @click="selectMyFlow">查询本账户</el-button>
					</div>
					<el-table :data="flowList"
					style="width: 100%"
					:row-class-name="tableRowClassName"
					height="340">
					<el-table-column prop="flow.flowId" label="交易编号"></el-table-column>
					<el-table-column prop="flow.outId" label="转出账户"></el-table-column>
					<el-table-column prop="flow.inId" label="转入账户"></el-table-column>
					<el-table-column prop="flow.startTime" label="交易时间"></el-table-column>
					<el-table-column prop="flow.flowAmount" label="交易金额(元)"></el-table-column>
					</el-table>
			</el-dialog>
			<div class="user-info-item">
				<div>
					<div class="avatar" :class="photo_class">
					  <p class="avatar-font">{{userInfo.userName.substring(0, 1)}}</p>
					</div>
				  </div>
				  <div>
					<div class="info-left-item">&nbsp;姓名：{{userInfo.userName}}</div>
					<div class="info-left-item">&nbsp;性别：{{userInfo.userGender}}</div>
					<div class="info-left-item">&nbsp;年龄：{{userInfo.userAge}}</div>
				  </div>
				  <div>
					<div class="info-right-item">&nbsp;身份证号：{{userInfo.userCard}}</div>
					<div class="info-right-item">&nbsp;电话号码：{{userInfo.userPhone}}</div>
					<div class="info-right-item">&nbsp;常住地址：{{userInfo.userAddress}}</div>
				  </div>
			</div>
			<div class="account-item">
				<el-menu class="menu-style">
					<el-menu-item class="menu-item" v-for="(item,i) in accountList"
					:key="i"
					:index="i+''">
						账户卡号：{{item.accountId}}&nbsp;
						余额：{{item.show? item.accountBalance : "****"}}
						<div class="btn-group">
							<el-button :class="item.show?'tShow-btn':'fShow-btn'" type="info" @click="setShow(i)" circle>{{item.show? "隐藏" : "显示"}}</el-button>
							<el-button class="transfer-btn" @click="transferIt(i)">转账</el-button>
							<el-button class="flow-btn" @click="flowIt(i)">流水查询</el-button>
						</div>
					</el-menu-item>
				</el-menu>
				<div style="height: 6vh;"></div>
				
			</div>
			
		</div>
		<!-- copyright -->
		<div class="copyright">
			<h2>Copyright &copy; 2021 版权所有| by
				<a href="#">No.11 Group</a>
			</h2>
		</div>
		<!-- //copyright -->
	</div>

</body>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
    el:'#mian',
    data() {
		return {
			userId: "",
			userInfo: {userName: "undefined"},
			accountList: [],
			flowList: [],

			transferRules: {
				accountDest: [
        			{ required: true, message: "请输入正确的转入账户" },
        			{ pattern: /^[0-9]{16,20}$/, message: "请输入正确的账户卡号" },
        		],
				nameDest: [
        			{ required: true, message: "请输入转入账户姓名" },
        		],
				balance: [
					{ required: true, message: "请输入转账金额" },
					{ pattern: /^\d+(\.\d{0,2})?$/, message: "转账金额只能到小数点后2位"}
				]
			},

			transfer: {
				accountSrc: "",
				accountDest: "",
				nameSrc: "",
				nameDest: "",
				balance: 0,
				// note: ""
			},

			curCardId: "",
			tagId: "",

			transferVisible: false,
			flowVisible: false,


			photo_color: ["cpc1", "cpc2", "cpc3", "cpc4", "cpc5", "cpc6", "cpc7"],
			photo_class: "",
			}
		
    },
	created() {
		var self = this;

		self.userId = window.localStorage.getItem("userId");
		// console.log(userId)
		if(self.userId == null || self.userId == "undefined"){
			window.location.href = "./index.html";
			return;	
		}

		axios.get("/user/getInfo",{
			params: {
				id: self.userId
			}
		}).then( res=> {
			var data = JSON.parse(res.data.data);
			console.log(data);
			self.userInfo = data;
		})

		self.photo_class = self.photo_color[Math.trunc(Math.random()*7)];

		self.getAccounts();
	},
	methods: {
		getAccounts(){
			var self = this;
			self.accountList.splice(0, self.accountList.length);
			axios.get("/user/getAccount",{
				params: {
					id: self.userId
				}
			}).then( res=> {
				var data = JSON.parse(res.data.data);
				if(data.length == 0){
					return;
				}
				for(var i=0;i<data.length;i++){
					self.accountList.push({
						accountId: data[i].accountId,
						accountBalance: data[i].accountBalance,
						show: false
					})
				}
			});
		},
		setShow(i){
			var self = this;
			self.accountList[i].show = !self.accountList[i].show;
		},
		logout(){
			var self = this;
			self.$confirm("确认退出登录？").then(() => {
				window.localStorage.removeItem("userId");
				window.location.href="./index.html";
				self.$message.success("退出登录成功！");
			}).catch( e => {

			});
		},
		transferIt(i){
			var self = this;
			
			self.transfer.accountSrc = self.accountList[i].accountId;
			self.transfer.accountDest = "";
			self.transfer.nameSrc = self.userInfo.userName;
			self.transfer.balance = "";
			
			self.transferVisible = true;
		},
		flowIt(i){
			var self = this;
			self.flowVisible = true;
			self.curCardId = self.accountList[i].accountId;
		},
		submitTransfer(form) {
			var self = this;

			self.$prompt("请输入支付密码","提示",{
				confirmButtonText: '确定',
          		cancelButtonText: '取消',
				inputType: "password",
				inputPattern: /^[0-9]{6}$/,
				inputErrorMessage: '请输入6位支付密码'
			}).then( ({value}) => {
				// axios.get("/valid_paypassword?accountId="+self.transfer.accountSrc+"&payPassword="+value
				// console.log(self.transfer.accountSrc+"||"+value)
				let validData = {
					accountId: self.transfer.accountSrc,
					payPassword: value
				}
				axios.post("/valid_paypassword",validData).then( res=> {
					console.log(res.data)
					console.log(validData)
					if(res.data.success){
						self.$refs[form].validate(validate=>{
						if(validate){
							//调用转账接口
							axios.post("/trans",self.transfer).then( res=> {
								if(res.data.statusCode == 2005){
									self.$message.warning(res.data.message);
								}else{
									self.$message.success("转账成功!");
									self.getAccounts();
									self.transferVisible = false;
									//update account info
								}
							})
						}else {
							self.$message.warning("请检查错误信息！");
						}
						});
					}else {
						self.$message.warning("支付密码错误，请重新输入！");
					}
				})
			}).catch(() => {
        	  	this.$message({
        	  	  type: 'info',
        	  	  message: '取消输入'
        	  	});
        	});
		},
		selectMyFlow(){
			var self = this;
			axios.get("/select_flow",{
				params: {
					account: self.curCardId
				}
			}).then( res => {
				var data = JSON.parse(res.data.data);
				self.flowList = data;
				console.log(data);
			});
		},
		selectFlow(){
			var self = this;
			var reg = /^[0-9]{16,20}$/;
			var r = self.tagId.match(reg);
			if(r != null){
				axios.get("/select_two",{
					params: {
						account_in: self.curCardId,
						account_out: self.tagId
					}
				}).then( res=> {
					if(res.data.success){
						self.flowList = JSON.parse(res.data.data);
						if(self.flowList.length == 0){
							self.$message.info("暂无与该账号流水记录！");
						}else{
							self.$message.success("查询成功！");
						}
					}else {
						self.$message.error("查询失败！");
					}
				})
			}else {
				self.$message.warning("请检查账户卡号是否正确！");
			}
		},
		handleClose() {
			var self = this;
			self.$confirm("关闭此次转账？").then(() => {
				self.transferVisible = false;
			}).catch( e => {

			});
		},
		tableRowClassName({row, rowIndex}) {
			var self = this;
        	if (self.flowList[rowIndex].my) {
        	  return 'warning-row';
        	} else {
        	  return 'success-row';
        	}
      	}
	}
});
</script>
<!-- //script -->

</html>
